<template>
  <el-row style="margin-top: 60px" :gutter="10">
    <el-col :span="8">
      <el-menu
        :default-active="$route.name"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#04254e"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-menu-item index="https-test" :route="{ path: '/' }"
          >HTTPS信令测试</el-menu-item
        >
        <el-menu-item index="url-test" :route="{ path: '/url-test' }"
          >流媒体传输协议测试</el-menu-item
        >
        <el-menu-item index="rtmp" :route="{ path: '/rtmp' }"
          >实时流预览</el-menu-item
        >
        <el-menu-item index="result" :route="{ path: '/result' }"
          >稳定性测试结果</el-menu-item
        >
        <el-menu-item
          index="stream-control"
          :route="{ path: '/stream-control' }"
          >视频流控制</el-menu-item
        >
      </el-menu>
    </el-col>
    <el-col :span="10">
      <div>
        <span class="layout-logo-title"> 山西省交通行业视频云联网信令测试软件 </span>
      </div>
    </el-col>
    <el-col :span="5" style="height: 64px; line-height: 64px">
      <div class="img-logo-swjtu">
        <img
          src="../assets/swjtu_logo3.png"
          height="65px"
          style="padding-left: 40%"
        />
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // activeIndex: "/"
      // activeIndex() {
      //   const { name } = this.$route;
      //   switch (name) {
      //     case "https-test":
      //       return "/";
      //     case "url-test":
      //       return "/url-test";
      //   }
      // }
    };
  },
  components: {},
  methods: {
    ...mapActions(["handleLogOut"]),
    logout() {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: "login",
        });
      });
    },
  },
};
</script>

<style lang="less">
.el-menu.el-menu--horizontal {
  border-bottom: 0px !important;
}
.el-menu-demo {
  margin-left: 3% !important;
  background-color: #04254e !important;
  // font-size: 20px;
}
.el-menu-item {
  font-size: 22px !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #409eff !important;
  // background-color: rgba(211, 220, 230, 0.8);
  background-color: #04254e !important;
}
.ivu-menu-horizontal {
  height: 0rem !important;
  line-height: 3rem !important;
}
.ivu-menu-horizontal.ivu-menu-light:after {
  height: 0rem !important;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active {
  color: #fff !important;
  background-color: #1081b3;
}
.ivu-layout-header {
  background-color: #01237c !important;
  //background-color: rgb(12,55,131) !important;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  // position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-title {
  // width: 600px;
  height: 64px;
  line-height: 64px;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
  color: #4bdaff;
  border-radius: 0.3rem;
  // float: left;
  // position: relative;
  // top: 1.5rem;
  border-bottom: 0.3rem solid #4bdaff;
  // left: 0px;
}
.ivu-menu-item,
.ivu-menu-submenu {
  color: #fff !important;
  font-weight: bold;
  font-size: 1.4rem !important;
}
.analysis-submenu .analysis-submenu-item.ivu-menu-item-active,
.analysis-submenu-item:hover {
  background: none !important;
  color: #4bdaff !important;
}
.layout-nav {
  // width: 82rem;
  height: 3rem;
  padding-left: 3rem;
  margin: 0 auto;
  // float: right;
}
.layout-logo-title {
  height: 64px;
  line-height: 64px;
  font-size: 2.3rem;
  font-weight: bold;
  text-align: center;
  color: rgba(239, 242, 245, 0.9);
  text-align: left;
  font-family: STKaiti;
  margin-left: 4%;
}
.img-logo-swjtu {
  //vertical-align: bottom;
  //margin-right:10px;
  opacity: 0.85;
  margin-top: 15px;
  // padding-left: 70%;
  // margin-right: 20%;
}
</style>
